<div class="preview" #box
     style="overflow: hidden;
     background: #fff;
     margin-top: 20px;
     height: calc(100% - 20px)"
>
    <div class="scene-center" style="background: #fff;margin: 0 auto"
         [style.width.px]="style.width"
         [style.height.px]="style.height"

         [style.transform-origin]="'top center'"
    >
        <ng-container *ngFor="let data of componentList; let i = index;">
            <div class="c-txt"

                 *ngIf="data.name == 'txt'"
                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
                 [style.color]="data.style.color"
                 [style.background]="data.style.background"
                 [style.justifyContent]="data.style.justifyContent"
                 [style.alignItems]="data.style.alignItems"
                 [style.fontFamily]="data.style.fontFamily"
                 [style.fontSize.px]="data.style.fontSize"
                 [style.textDecoration]="data.style.textDecoration"
                 [style.fontStyle]="data.style.fontStyle"
                 [style.fontWeight]="data.style.fontWeight"
            >
                <app-c-txt
                    [data]="data.data"
                ></app-c-txt>
            </div>
            <div class="c-img"
                 *ngIf="data.name == 'img'"

                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
                 [style.color]="data.style.color"
                 [style.background]="data.style.background"
                 [style.justifyContent]="data.style.justifyContent"
                 [style.alignItems]="data.style.alignItems"
                 [style.fontFamily]="data.style.fontFamily"
                 [style.fontSize.px]="data.style.fontSize"
                 [style.textDecoration]="data.style.textDecoration"
                 [style.fontStyle]="data.style.fontStyle"
                 [style.fontWeight]="data.style.fontWeight"
            >
                <app-c-img
                    [src]="data.data.src"
                ></app-c-img>
            </div>
            <div class="c-web"
                 *ngIf="data.name == 'SG_web'"
                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
            >
                <app-c-web
                    [data]="data.data"
                ></app-c-web>
            </div>
            <div class="c-pdf"
                 *ngIf="data.name == 'pdf'"
                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
                 [style.color]="data.style.color"
                 [style.background]="data.style.background"
                 [style.justifyContent]="data.style.justifyContent"
                 [style.alignItems]="data.style.alignItems"
                 [style.fontFamily]="data.style.fontFamily"
                 [style.fontSize.px]="data.style.fontSize"
                 [style.textDecoration]="data.style.textDecoration"
                 [style.fontStyle]="data.style.fontStyle"
                 [style.fontWeight]="data.style.fontWeight"
            >
                <app-c-pdf
                    [src]="data.data.src"
                ></app-c-pdf>
            </div>
            <div class="c-video"
                 *ngIf="data.name == 'video'"
                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
                 [style.color]="data.style.color"
                 [style.background]="data.style.background"
                 [style.justifyContent]="data.style.justifyContent"
                 [style.alignItems]="data.style.alignItems"
                 [style.fontFamily]="data.style.fontFamily"
                 [style.fontSize.px]="data.style.fontSize"
                 [style.textDecoration]="data.style.textDecoration"
                 [style.fontStyle]="data.style.fontStyle"
                 [style.fontWeight]="data.style.fontWeight"
            >
                <app-c-video
                    [src]="data.data.src"
                ></app-c-video>
            </div>
            <div class="c-audio"
                 *ngIf="data.name == 'audio'"
                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
                 [style.color]="data.style.color"
                 [style.background]="data.style.background"
                 [style.justifyContent]="data.style.justifyContent"
                 [style.alignItems]="data.style.alignItems"
                 [style.fontFamily]="data.style.fontFamily"
                 [style.fontSize.px]="data.style.fontSize"
                 [style.textDecoration]="data.style.textDecoration"
                 [style.fontStyle]="data.style.fontStyle"
                 [style.fontWeight]="data.style.fontWeight"
            >
                <app-c-audio
                    [src]="data.data.src"
                ></app-c-audio>
            </div>
            <div class="c-button"
                 *ngIf="data.name == 'button'"
                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
                 [style.color]="data.style.color"
                 [style.background]="data.style.background"
                 [style.justifyContent]="data.style.justifyContent"
                 [style.alignItems]="data.style.alignItems"
                 [style.fontFamily]="data.style.fontFamily"
                 [style.fontSize.px]="data.style.fontSize"
                 [style.textDecoration]="data.style.textDecoration"
                 [style.fontStyle]="data.style.fontStyle"
                 [style.fontWeight]="data.style.fontWeight"
            >
                <app-c-button
                    [data]="data.data"
                ></app-c-button>
            </div>
            <div class="c-select"
                 *ngIf="data.name == 'SG_select'"
                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
                 [style.color]="data.style.color"
                 [style.background]="data.style.background"
                 [style.justifyContent]="data.style.justifyContent"
                 [style.alignItems]="data.style.alignItems"
                 [style.fontFamily]="data.style.fontFamily"
                 [style.fontSize.px]="data.style.fontSize"
                 [style.textDecoration]="data.style.textDecoration"
                 [style.fontStyle]="data.style.fontStyle"
                 [style.fontWeight]="data.style.fontWeight"
            >
                <app-c-select
                    [data]="data.data"
                ></app-c-select>
            </div>
            <div class="c-sgaudio"
                 *ngIf="data.name == 'SG_audio'"
                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
                 [style.color]="data.style.color"
                 [style.background]="data.style.background"
                 [style.justifyContent]="data.style.justifyContent"
                 [style.alignItems]="data.style.alignItems"
                 [style.fontFamily]="data.style.fontFamily"
                 [style.fontSize.px]="data.style.fontSize"
                 [style.textDecoration]="data.style.textDecoration"
                 [style.fontStyle]="data.style.fontStyle"
                 [style.fontWeight]="data.style.fontWeight"
            >
                <app-c-sgaudio
                    [data]="data.data"
                ></app-c-sgaudio>
            </div>
            <div class="c-judgement"
                 *ngIf="data.name == 'SG_judgement'"
                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
                 [style.color]="data.style.color"
                 [style.background]="data.style.background"
                 [style.justifyContent]="data.style.justifyContent"
                 [style.alignItems]="data.style.alignItems"
                 [style.fontFamily]="data.style.fontFamily"
                 [style.fontSize.px]="data.style.fontSize"
                 [style.textDecoration]="data.style.textDecoration"
                 [style.fontStyle]="data.style.fontStyle"
                 [style.fontWeight]="data.style.fontWeight"
            >
                <app-c-judgement
                    [data]="data.data"
                ></app-c-judgement>
            </div>
            <div class="c-vote"
                 *ngIf="data.name == 'SG_vote'"
                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
                 [style.color]="data.style.color"
                 [style.background]="data.style.background"
                 [style.justifyContent]="data.style.justifyContent"
                 [style.alignItems]="data.style.alignItems"
                 [style.fontFamily]="data.style.fontFamily"
                 [style.fontSize.px]="data.style.fontSize"
                 [style.textDecoration]="data.style.textDecoration"
                 [style.fontStyle]="data.style.fontStyle"
                 [style.fontWeight]="data.style.fontWeight"
            >
                <app-c-vote
                    [data]="data.data"
                ></app-c-vote>
            </div>
            <div class="c-checkbox"
                 *ngIf="data.name == 'SG_checkbox'"
                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
                 [style.color]="data.style.color"
                 [style.background]="data.style.background"
                 [style.justifyContent]="data.style.justifyContent"
                 [style.alignItems]="data.style.alignItems"
                 [style.fontFamily]="data.style.fontFamily"
                 [style.fontSize.px]="data.style.fontSize"
                 [style.textDecoration]="data.style.textDecoration"
                 [style.fontStyle]="data.style.fontStyle"
                 [style.fontWeight]="data.style.fontWeight"
            >
                <app-c-checkbox
                    [data]="data.data"
                ></app-c-checkbox>
            </div>
            <div class="c-tieba"
                 *ngIf="data.name == 'SG_tieba'"
            >
                <app-c-tieba
                    [data]="data.data"
                    [appAutoScale]="style"
                ></app-c-tieba>
            </div>
            <div class="c-weibo"
                 *ngIf="data.name == 'SG_weibo'"
            >
                <app-c-weibo
                    [appAutoScale]="style"
                    [data]="data.data"
                ></app-c-weibo>
            </div>
            <div class="c-qq"
                 *ngIf="data.name == 'SG_QQ'"
            >
                <app-c-qq
                    [data]="data.data"
                    [appAutoScale]="style"
                ></app-c-qq>
            </div>
            <div class="c-brain"
                 *ngIf="data.name == 'SG_brain'"
            >
                <app-c-brain
                    [data]="data.data"
                    style="transform-origin: 0 0"
                    [appAutoScale]="style"
                ></app-c-brain>
            </div>
            <div class="c-brain"
                 *ngIf="data.name == 'SG_infoext'"
            >
                <app-c-braininfo
                    [data]="data"
                    style="transform-origin: 0 0"
                    [appAutoScale]="style"
                    [dis] = 'true'
                    [isScreen]="true"
                ></app-c-braininfo>
            </div>
            <div class="c-turns-speak"
                 *ngIf="data.name == 'SG_turns_speak'"
            >
                <app-c-sixhats
                    [data]="data.data"
                    style="transform-origin: 0 0"
                    [appAutoScale]="style"
                ></app-c-sixhats>
            </div>
            <div class="c-braingroup"
                 *ngIf="data.name == 'SG_tnfbgroup'"
            >
                <app-c-braingroup
                    [data]="data.data"
                    style="transform-origin: 0 0"
                    [appAutoScale]="style"
                ></app-c-braingroup>
            </div>
            <div class="c-subjective"
                 *ngIf="data.name == 'SG_subjective'"
            >
                <app-c-subjective
                    [data]="data.data"
                    [appAutoScale]="style"
                ></app-c-subjective>
            </div>
            <div class="c-causal"
                 *ngIf="data.name == 'SG_causal'"
            >
                <app-c-causal
                    [data]="data.data"
                    style="transform-origin: 0 0"
                    [appAutoScale]="style"
                ></app-c-causal>
            </div>
            <div class="c-guess"
                 *ngIf="data.name == 'SG_guess'"
            >
                <app-c-guess
                    [data]="data.data"
                    style="transform-origin: 0 0"
                    [appAutoScale]="style"
                ></app-c-guess>
            </div>

            <div class="c-seek"
                 *ngIf="data.name == 'SG_seek'"
            >
                <app-c-seek
                    [data]="data.data"
                    style="transform-origin: 0 0"
                    [appAutoScale]="style"
                ></app-c-seek>
            </div>
            <div class="c-mindmap"
                 *ngIf="data.name == 'SG_mindmap'"
            >
                <app-c-mindmap
                    [data]="data.data"
                    style="transform-origin: 0 0"
                    [appAutoScale]="style"
                ></app-c-mindmap>
            </div>
            <div class="c-bullet"
                 *ngIf="data.name == 'SG_bullet'"
                 style="z-index: 9999;"
                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
            >
                <app-c-bullet
                    [data]="data.data"
                ></app-c-bullet>
            </div>

        </ng-container>
    </div>
</div>
